<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: rgb(243, 230, 241);
      }
      .shell {
        width: 90%;
        height: 700px;
        display: flex;
      }
      .box {
        flex: 1;
        overflow: hidden;
        transition: 0.5s;
        margin: 0 20px;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        border: 10px solid #fff;
        background-color: #fff;
      }
      .box > img {
        width: 200%;
        height: 85%;
        object-fit: cover;
        transition: 0.5s;
      }
      .box > span {
        font: 200 45px "优设标题黑";
        text-align: center;
        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box:hover {
        flex-basis: 40%;
      }
      .box:hover > img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="shell">
      <div class="box">
        <img src="./img (1).jpg" />
        <span>Image</span>
      </div>
      <div class="box">
        <img src="./img (2).jpg" />
        <span>Video</span>
      </div>
      <div class="box">
        <img src="./img (3).jpg" />
        <span>File</span>
      </div>
      <div class="box">
        <img src="./img (4).jpg" />
        <span>Music</span>
      </div>
      <div class="box">
        <img src="./img (5).jpg" />
        <span>Lyric</span>
      </div>
    </div>
  </body>
</html>
